<template>
	<view class="content">
		<view style="display: flex;flex-direction: row;">
			<view class="cards" v-for="(item,index) in acticityData">
				<view class="u-line-1 card-name" style="display: flex;">
					<text style="font-size: 28rpx;font-weight: bold;">{{item.activityName}}</text>
				</view>
				<text class="u-line-1 card_text">
					近{{item.clienteleCondition}}天未购买指定商品的客户可享受低价优惠
				</text>

				<view class="footer-button" style="margin-top: 20rpx;">
					<view class="last_button" style="display: flex;justify-content: space-between;font-size: 24rpx;">
						<view style="font-size: 28rpx;color: #999;">
							3天后截止
						</view>
						<button style="line-height: 50rpx;padding:0 30rpx;color: #fff;" class="bg_color"
							@click="showInfoModal(2,item)">去报名</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		setThemeColor
	} from "../../../../utils/setTheme.js";
	let app = getApp();
	export default {
		props: {
			acticityData: {
				type: Array,
				require: true
			},
			// parentId: {
			// 	type: String,
			// 	default: ''
			// },
			// bgColor: {
			// 	type: String,
			// 	default: 'blue'
			// },
		},
		data() {
			return {
				bgColor: '#ffffff',
				theme: app.globalData.theme,
				productList: [{
					name: '冻品尝鲜价04.14-04.30',
					type: 1, //1:活动中，2未开始，3已结束
					text: '近30天未购买指定商品的客户可享受低价优惠',
					time: '2024.4.17-2024.4.30',
					productNum: 2,
				}, {
					name: '冻品尝鲜价04.14-04.30',
					type: 1, //1:活动中，2未开始，3已结束
					text: '近30天未购买指定商品的客户可享受低价优惠',
					time: '2024.4.17-2024.4.30',
					productNum: 2,
				}]
			}
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		methods: {
			showInfoModal(ele,item) {
				this.$emit('goActiveRegistration',item)
			},
			filterNewDataList(){
				const updateDate = this.calculateDaysDifferenceForArray(this.acticityData);
			},
			calculateDaysDifferenceForArray(arr) {
			  const currentDate = new Date(); // 获取当前日期
			
			  // 遍历数组中的每个对象，并计算与当前时间相差的天数
			  arr.forEach(obj => {
			    const itemDate = new Date(obj.registrationDeadline); // 转换对象中的日期字符串为 Date 对象
			    const timeDifference = currentDate - itemDate; // 计算时间差（以毫秒为单位）
			    const daysDifference = Math.floor(timeDifference / (1000 * 60 * 60 * 24)); // 将时间差转换为天数
			    obj.daysDifference = daysDifference; // 将相差天数保存到对象中的新属性中
			  });
			
			  return arr; // 返回更新后的数组
			}
			
		}
	}
</script>

<style scoped lang="scss">
	.main_color {
		@include main_color(theme);
	}

	.bg_color {
		@include main_bg_color(theme);
	}

	.plain_bgColor {
		@include main_color(theme);
		// @include main_bg_rgba_color(theme, 0.05);
		border: 1rpx solid $main-color-theme1;
	}

	.cards {
		flex: 0 0 440rpx;
		border-radius: 20rpx;
		background-color: #fafafa;
		padding: 20rpx;
		margin-right: 20rpx;

		.card_text {
			display: -webkit-box; //（兼容性）
			-webkit-line-clamp: 1; //（指定显示行数）
			text-overflow: ellipsis; // (省略号）
			overflow: hidden; //（多余部分隐藏）
			margin: 20rpx 0;
			font-size: 28rpx;
			color: #000;
		}
	}
</style>